/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

@import "ua.css";
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: baseline;}
td {font-weight: normal; vertical-align: baseline;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
/*input[type="checkbox"] {vertical-align: bottom;}*/
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea, button {font: 99% arial, "Microsoft Yahei";}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
input[type=file], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  

/*******************************************************************************/
/* Style */
/*******************************************************************************/

/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 12px "Microsoft Yahei",arial,"Hiragino Sans GB",sans-serif;}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #333; }
a:hover {color: #09c;} 

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #0099cc; color: #fff; text-shadow: none;}
::selection {background: #0099cc; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #0099cc;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

/*******************************************************************************/
/* Base */
/*******************************************************************************/
h1 {font-size:21px; height:50px; line-height:50px; font-weight:normal;}
h2 {font-size:17px; height:40px; line-height:30px; font-weight:normal;}
h3 {font-size:15px; height:30px; line-height:25px; font-weight:normal;}
a {text-decoration: none;}
a:hover {text-decoration: none;} 

input[type="text"][disabled], input[type="text"][readonly], textarea[disabled], textarea[readonly] {
	border-color:#fff;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	background-color:#FFFFFF;
	color: #555;
}

input,textarea{
	font-size:14px;
	padding:6px 5px 5px 5px;
	border:1px solid #d0d0d0;
	margin: 5px 0px 5px 0px;
	color: #000;
}

/* table {margin:10px;} */
td {vertical-align:baseline; margin-left:5px;}
thead td {color:#999999; font-weight: bold; border-top:1px solid #eeeeee; border-bottom:1px solid #cccccc;}

.wrapper{width:100%;min-width:360px; margin:0 auto;}
.bgstd{background-color:#19a2c6;}
.bggray{background-color:#eff1f1;}

.header, .content, .footer {max-width:1200px; margin:0 auto;}
.new {font-size:12px; color:#f05050; font-family:"Microsoft Yahei", Arial; /*text-shadow: 1px 1px 1px #fff;*/}
.crmb {height:30px; line-height:30px;}
.crmb span{font-family:"SimSun"; font-weight:700; color:#777; margin: 0 5px;}
.left {float:left; width:70%;}
.right {float:right; width:28%;}
.pager {height:40px; padding:5px 0;}
.pager a, .pager span {display:inline-block; background-color:#eee; min-width:30px; padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; text-align:center;}
.pager span {font-weight:bold; color:#fff; background-color:#09c;}

@media screen and (max-width:1024px) {
  .content {width: 96%;}
  .left {float:none; width:100%;} /* 1024x70% */
  .right {float:none; width:100%; margin:0 auto;} /* 1024x28% */

  .product .left, .product .right {float:none; width:100%; margin: 0 auto;}

}

/* header
---------------------------------------------*/
.topbar {height:0px;}
.topbar .tips {color:#fff; max-width:1200px; margin:0 auto; text-align:right; font-weight:300;}
.headerbar {height:53px; backdrop-filter:saturate(180%) contrast(90%) blur(7px); background-color: rgba(247, 247, 247, .8);}
.header {height:53px;}
.header .logo {float:left; width:135px;height:53px;}
.header .logo img {width:135px; margin-top:12px;}
.header .nav ol {float:left;}
.header .nav ol li {float:left; text-align:center; list-style-type: none; width:62px; height:33px; line-height:33px; margin: 10px 3px 0 3px;}
.header .nav ol li a { font-size:14px; color:#000; text-shadow:0 0 2px #fff;}
.header .nav .current a {color:#19a2c6; /*background-color:#f9f9f9; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;*/}
.header .nav .current a:hover {background-color:#fff;}
.header .nav .selected {background:#fff; margin-top:10px; height:33px; line-height:33px; box-shadow: 0px 0px 0px rgb(128 128 128 / 57%);
    -webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;}
.header .search {float:right; width:300px; height:53px;}
.header .contact {float:right; height:53px; line-height:53px; text-align:right;}
.header .contact span {color: #f66; font-size:17px; padding-left:25px; text-shadow: 0 0 3px #fff; background:url("/img/icon-hdphone.png") no-repeat;}

.navsub {position:absolute; left:0px; width:100%; margin:0 auto;}
.navsub .item {width:100%; margin:-10px 0 0 0; position:absolute; z-index:1000;}
.navsub .item .inner {margin:auto; width:1200px; position:relative;}
.navsub .item dl {float:left; min-width:200px; padding-top:10px; padding-bottom:5px; margin-bottom:10px; background:#fff;
    -webkit-border-radius:0px 5px 5px 5px; -moz-border-radius:0px 5px 5px 5px; border-radius:0px 5px 5px 5px;
    filter:alpha(Opacity=97); -moz-opacity:0.97; opacity: 0.97; box-shadow:2px 2px 3px rgb(128 128 128 / 97%);}
.navsub .item dd {font-size:13px; height:35px; line-height:35px; padding:0 25px;}
.navsub .item dd a {text-decoration:none; }
/*.navsub .item dd a:before { content:"\2022"; color:rgb(127 127 127 / 15%); margin-right:7px; font-size:1.15em; text-shadow: 0 0 2px #39c;}*/

@media screen and (max-width:640px) {
  .header .nav ol li {width:46px;}
  .header .search {display:none;}
  .header .contact {display:none;}

  .header .logo {width:120px; height:38px;}
  .header .logo img {width:120px; height:23.56px; margin:14px 0 0 0;}

  /*.navsub .item .inner {width:auto; display:none;}*/
}

@media screen and (max-width:414px) {
  .header .logo {width:100px;}
  .header .logo img {width:100px; height:19.63px; margin:16px 0 0 0;}
}


.footer {color:#333;}
.footer small{display:block;}
.footer center{text-indent:-9999px;}
.footer ul {text-align:center;}
.footer li {display:inline-block; height:30px; line-height:30px; padding:0 333 0;}
.footer .nav {padding-top:10px;}
.footer .nav dl {float:left; width:120px; line-height:30px;}
.footer .nav dt {font-size:14px;}
.footer .nav dd {font-size:12px;}
.footer .nav dd a {color:#777;}
.footer .nav > dl:nth-child(3) > dd:nth-child(4) > a {color:#eff1f1}
.footer .nav dl.qrcode {float:right; width:100px; text-align:center; margin-left:70px;}
.footer .nav dl.qrcode dd {width:100px; height:100px; background-color:#fff;}
.footer .nav dl.qrcode dd img {margin-top:2px; margin-left:2px;}
.footer .nav dl.qrcode dt {font-size:12px;}
@media screen and (max-width:640px) {
  .footer .nav {padding-bottom:10px;}
  .footer .nav dl {width:25%;}
  .footer .nav dl.qrcode {display:none;}
  .footer li {height:20px; line-height:20px;}
}

/* list & content pages
---------------------------------------------*/

.banner {height:120px;}
.banner h1{color:#fff; text-shadow: 0 0 3px #333; margin-left: 10px;}
.banner span{color:#fff; margin-right: 10px; float:right;}

.list { margin-bottom:10px; width:100%; }
.list li {clear:both; line-height:2; min-height:180px;}
/*.list li:hover {background-color:#eff1f1;}*/
.list li h3{font-size:18px; height:20px;line-height:20px;}
.list li p {font-size:12px; margin-top:10px; margin-bottom:10px;}
.list .pic {float:left; margin-right: 10px; margin-bottom: 28px; overflow: hidden; display: inline; }
.list .pic img { border: 1px solid #ccc; max-width:242px; max-height:152px; display: block;}
.list .tle { display:block; }

.article {width:100%;}
.article h1 {font-size:28px; text-align:center;font-weight:600;}
.article h2 {font-size:20px; font-weight:600;}
.article h3 {font-size:18px;}
.article .info .time {color:#fff; text-align:center;}
.article .info .bdsharebuttonbox {float: right; width: 160px;}
.article .description {margin:5px 28px; font-size:14px; line-height:2; background-color:#f0f0f0; padding:10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.article .main {line-height:2; min-height:260px; margin-bottom:10px;}
.article .main p {text-indent:2em; font-size:16px; margin-bottom:7px;}
.article .main p a {color:#09c;}
.article .main p strong {font-weight:normal;}
.article .main p a.keylink {color:#333;}
.article .main p img{ border:1px solid #fff; border-radius:20px; width:90%; max-width:600px; margin:10px 0 10px -2em; box-shadow:0 0 0 1px rgb(0 0 0 / 10%);}
.article .main ol {margin-left:2em; margin-bottom:1em;}
.article .main ol li {font-size:16px;}
.article .service {background-color:#f0f0f0; height:30px; line-height:30px; font-size:12px; padding:0 10px; margin-top:20px; margin-bottom:10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.article .service span {margin-right:20px;}
.article .related {margin:20px 0;font-size:12px; color:#111;}
.article .related ul {margin-top:5px; border-top:1px dotted #ddd;}
.article .related li {float:left; padding-left: 25px; height:25px; line-height:25px; width:50%; font-size:12px;}
.article .related li span {float:right; font-size:12px; color:#666;}
.article .related li a {color:#666;}

.article .comments > ul > li {background: url(/img/rslide_3.png) 0 2px no-repeat; min-height:50px;}
.article .comments > ul > li > dl > dt { color:#111; text-indent:3.5em; font-size:1.15em; }
.article .comments > ul > li > dl > dt > span { font-size: 0.85em; color:#808080; }
/*.article .comments > ul > li > dl > dt:before { content:""; margin-right:7px; font-size:1.15em; text-shadow:0 0 1px #39c; background: url(/img/rslide_3_on.png) 13px 18px no-repeat; background-color: #19a2c6;}*/
.article #quick-contact {padding:10px; height:140px; line-height:30px; background-color:#19a2c6; color:#fff; font-size:14px; margin:20px 0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}

.article_product dl {float:left; margin: 10px 0; width:50%; min-width:300px; height:155px; overflow:hidden;}
.article_product dl dt {margin-left:230px; font-size:17px; font-weight:600; height:30px; line-height:30px; overflow:hidden; }
.article_product dl dd:nth-child(2) {float:left; width:220px; margin-top:-30px;}
.article_product dl dd:nth-child(2) > img {margin: 1px; border-radius: 10px; box-shadow:0 0 0 1px rgb(0 0 0 / 10%);}
.article_product dl dd:nth-child(3) {margin-left:230px; line-height:1.70em;}

.related-galleries {max-width:1200px; margin:0 auto 20px auto; display:flex; justify-content:space-evenly;}
.related-galleries > dl {max-width:300px; margin:10px; padding:0 0 10px 0; border-radius:10px; display:flex; flex-wrap:wrap; flex-direction:row; align-content:flex-start; overflow:hidden; transition:transform 0.5s ease;}
.related-galleries > dl:hover {transform: translateY(-10px); box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.25);}
.related-galleries > dl > dt {width:100%; height:182px; background-color:#f1f8ff; border-top-left-radius:10px; border-top-right-radius:10px; display:flex; justify-content:center; align-items: center;}
.related-galleries > dl > dt img {min-width:240px; min-height:150px;}
.related-galleries > dl > dd {width:100%; padding:0 20px; line-height:2em; color:#777; }
.related-galleries > dl > dd:nth-child(2) {height:30px; line-height:30px; overflow:hidden; background-color:#f1f8ff;}
.related-galleries > dl > dd h3 {font-weight:600;}

@media screen and (max-width:960px) {
  .article_product dl {width:100%;}
}

.right .aside {padding:15px; margin-bottom:30px; border-radius:10px; background-color:#f1f8ff;}
.right .aside h3 {border-bottom: 1px solid #ddd; font-size:17px; font-weight:600; color:#000;}
.right .aside ol {border-top: 1px solid #fff;}
.right .aside ol > li {list-style-type: none; height:30px; line-height:30px; overflow:hidden;}
.right .aside ol > li > span {width:17px; height:17px; line-height:17px; display:inline-block; margin-right:7px; color:#777; font-family:Arial; font-weight:600; text-align:center; background-color:#eee; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.right .aside ol > li:nth-child(1) > span {color:#ff473d;}
.right .aside ol > li:nth-child(2) > span {color:#ff6a29;}
.right .aside ol > li:nth-child(3) > span {color:#ff9214;}
.right .aside .current {font-weight:bold;}

.right .adv { margin-bottom: 30px; border-top: 2px solid #19a2c6; }
.right .adv a {width:100%; margin-top:100px; padding:5px 15px; text-shadow: 0 0 1px #fff; color:#000; display:inline-block; background-color:#ccc; filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9;}
.right .adv a {color:#005167; height:74px;}
.right .adv a span {font-size:16px;height: 30px; line-height: 30px;}
.right .adv a li {list-style-type: none; text-indent:16px; color:#000;}
.right .adv a:hover{text-decoration: none;}

/* Product Advanced Template */
/*.product {min-width:100%; overflow:hidden; animation:gradient 30s ease infinite; background-image:radial-gradient(circle at 50% 0px, rgba(0, 0, 0, 0) 10vw, rgba(0, 0, 255, 0.05) 30vw, rgba(255, 0, 0, 0.05) 50vw, rgba(0, 0, 0, 0) 80vw); background-size:200% 100%;}
@keyframes gradient { 0% {background-position: 0% 0%;} 50% {background-position: 300% -300px;} 100% {background-position: 0% 0%;} }
*/
.product {min-width:100%; overflow:hidden; background-image:radial-gradient(circle at 50% 0px, rgba(0, 0, 0, 0) 10vw, rgba(0, 0, 255, 0.05) 30vw, rgba(255, 0, 0, 0.05) 50vw, rgba(0, 0, 0, 0) 80vw); background-size:150% 100%;}

.product .banner {text-indent:-9999em; width:100%; height:0; background:none;}
.product .crmb {text-indent:-9999em; height:0;}

.product .left .ln {color:transparent; background-image:linear-gradient(45deg, #096ec3, #7ebcf1, #b80aed, #cf0b0b, #ff0000); background-clip:text;}

.product .left .article h1 { margin-left:20px; text-align:left; font-weight:600; font-size:40px; max-width:560px; height:300px; line-height:500px; z-index:690; position:relative;}
.product .left .article .info .time {text-align:left; text-indent:-9999em; height:0;}
.product .left .article .description {font-size:18px; color:#575757; font-weight:600; background:none; margin:0 20px; padding:0; max-width:560px; height:150px; line-height:2em; z-index:690; position:relative;}
.product .left .article .main p { text-indent:0em; }
.product .left .article .main > p:nth-child(1) { margin: -400px 0 0 0; height:600px; }
.product .left .article .main > p:nth-child(1) > img:nth-child(1) { margin: 0 0 0 600px; max-width:1200px;  border:0; border-radius:0; box-shadow:none;}
.product .left .article .register { padding:0 20px; z-index:690; position:relative; }
.product .left .article .register > button { font-size:14px; margin:0 20px 0 0; min-width:150px; height:50px; border-radius:12px; opacity:0.8;}
.product .left .article .register > button:nth-child(1) { background-color:#19a2c6; color:#f0f0f0; border:1px solid #19a2c6;}
.product .left .article .register > button:nth-child(2) { background-color:#f0f0f0; color:#19a2c6; border:1px solid #d0d0d0;}
.product .left .article .register > button:last-child { margin-right:0;}
.product .left .article .register > button:hover { opacity:1; }

.product .left .article .register > a { display: inline-block; text-align:center; font-size:14px; line-height:48px; margin:0 20px 0 0; min-width:150px; height:50px; border-radius:12px; opacity:0.8;}
.product .left .article .register > a:nth-child(1) { background-color:#19a2c6; color:#f0f0f0; border:1px solid #19a2c6;}
.product .left .article .register > a:nth-child(2) { background-color:#f0f0f0; color:#19a2c6; border:1px solid #d0d0d0;}
.product .left .article .register > a:last-child { margin-right:0;}
.product .left .article .register > a:hover { opacity:1; box-shadow: 2px 2px 10px #999}

.product .left, .product .right {float:none; width:1200px; margin: 0 auto;}
.product .left .fun, .product .left .fun-c, .product .left .fun-r {margin: 0 calc((-100vw + 1200px + 17px) / 2); padding:100px 0; display: flex; flex-wrap: nowrap; justify-content: center;}
.product .left .fun {flex-direction: row;}
.product .left .fun-c { padding-bottom:0; flex-direction:column; align-items:center; text-align:center;}
.product .left .fun-r {flex-direction: row-reverse;}
.product .left .fun > div, .product .left .fun-r > div {width:600px; display:flex; flex-direction:column; justify-content:space-evenly;}
.product .left .fun-c > div {display:flex; flex-direction:column; justify-content:space-evenly; max-width:1200px;}
.product .left .fun > div:nth-child(1), .product .left .fun-r > div:nth-child(1) { padding:100px 30px; }
.product .left .fun-c > div:nth-child(1) { padding:20px 10px; }
.product .left .fun > div > h2, .product .left .fun-c > div > h2, .product .left .fun-r > div > h2 {font-size:3em; height:3em; line-height:3em;}
.product .left .fun > div > h2.ln, .product .left .fun-c > div > h2.ln, .product .left .fun-r > div > h2.ln {color:transparent; background-image:linear-gradient(45deg, #096ec3, #7ebcf1, #b80aed, #cf0b0b, #ff0000); background-clip:text;}
.product .left .fun > div > ul > li, .product .left .fun-r > div > ul > li {font-size:1.25em; text-indent:0em; line-height:3em;}
.product .left .fun > div > ul > li:before, .product .left .fun-r > div > ul > li:before {content:'\2022'; color:#39c; padding: 0 0.5em 0 0; text-shadow: 0 0 2px #999;}/*
.product .left .fun > div > img, .product .left .fun-c > div > img, .product .left .fun-r > div > img { border-radius:0.75rem; max-width:none; box-shadow:0 0 10px rgb(128 128 128 / 90%);} */
.product .left .fun-c > div > ul { display:flex; flex-wrap:wrap; justify-content:space-evenly}
.product .left .fun-c > div > ul > li { width:200px; height:57px; overflow:hidden; margin:10px 15px; border-radius:0.75rem; box-shadow:0 0 10px #50505070; display:flex; justify-content:center; align-items:center; background-color:#fff;}

.product .right {display: none;}
/*.product .right .aside, .product .right .adv {width:100%; margin: 10px; padding: 0; }
.product .right .aside h3 {margin:10px 10px 0 10px;}
.product .right .aside ol {margin: 0 10px; }*/
.product .left .bg00 {background-color: rgba(255, 255, 255, 1);}
.product .left .bg01 {background-image: radial-gradient(circle at 38.2% 95%, rgba(255, 255, 255, 1) 10%, rgba(255, 0, 0, 0.0375) 30%, rgba(0, 0, 255, 0.0375) 50%, rgba(255, 255, 255, 1) 80%);}
.product .left .bg02 {background-image: radial-gradient(circle at 10vw 50vh, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 0, 0.0375) 30%, rgba(0, 255, 255, 0.0375) 50%, rgba(0, 0, 0, 0) 80%);}
.product .left .bg03 {background-image: radial-gradient(circle at 10vw 50vh, rgba(0, 0, 0, 0) 10%, rgba(0, 255, 255, 0.0375) 30%, rgba(255, 255, 0, 0.0375) 50%, rgba(0, 0, 0, 0) 80%);}
.product .left .bg04 {background-image: radial-gradient(circle at bottom, rgba(0, 0, 0, 0) 10%, rgba(255, 0, 0, 0.0375) 30%, rgba(0, 0, 255, 0.0375) 50%, rgba(0, 0, 0, 0) 80%);}
.product .left .bg05 {background-image: radial-gradient(circle at 10vw 50vh, rgba(255, 255, 255, 1) 10%, rgba(255, 0, 0, 0.0375) 30%, rgba(0, 0, 255, 0.0375) 50%, rgba(255, 255, 255, 1) 80%);}

.product .left .bg06 {background:url("/img/bg06.png") no-repeat;}
.product .left .bg07 {background:url("/img/bg07.png") no-repeat;}
.product .left .bg30 {background:url("/img/bg30.png") no-repeat;}
.product .left .bg31 {background:url("/img/bg31.png") no-repeat;}
.product .left .bg32 {background:url("/img/bg32.png") no-repeat;}
.product .left .bg33 {background:url("/img/bg32.png") no-repeat;}
.product .left .bg33 {background:url("/img/bg33.png") no-repeat;}
.product .left .bg34 {background:url("/img/bg34.png") no-repeat;}
.product .left .bg35 {background:url("/img/bg35.png") no-repeat;}
.product .left .bg36 {background:url("/img/bg36.png") no-repeat;}


.download {min-width:100%; background:url("/img/bg01.png") no-repeat; font-size: 1.15em;}
.download .article .info .time {text-indent:-9999em; text-align:left;}
.download .article h1 { text-align:left; font-weight:600; font-size:40px; margin-top:20px;}
.download .article h2 { font-weight:600; font-size:22px;}
.download .article h3 { font-weight:600; font-size:17px;}
.download .article .main { padding:20px; margin-bottom:20px; border-radius:20px; border:1px solid #d0d0d0; background-color:#fff;}
.download .article .main ul { margin-left:2em; }
.download .left, .product .right {float:none; width:1200px; margin: 0 auto;}
.download .right {display: flex; justify-content: space-between;}

/*******************************************************************************/
@media screen and (max-width:1201px) {
  .product .left {float:none; width:100%; margin: 0 auto;}
  .product .left .fun, .product .left .fun-c, .product .left .fun-r {margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: center; min-height:500px;}
  .product .left .fun > div:nth-child(1), .product .left .fun-r > div:nth-child(1) { padding:100px 20px 50px 20px; }

  .product .left .article h1 {margin: 0 20px; line-height:90px; height:90px;}
  .product .left .article .description {margin: 0 20px;}
  .product .left .article .main h2 {margin: 0;}
  .product .left .fun > div > h2, .product .left .fun-c > div >h2, .product .left .fun-r > div > h2 {font-size:2.4em; height:2.4em; line-height:2.4em;}

  .article #quick-contact {margin: 20px 10px;}
}

@media screen and (max-width:801px) {
  .product .left .article .main > p:nth-child(1) { margin: 100px 0 0 0;}
  .product .left .article .main > p:nth-child(1) > img:nth-child(1) { margin: 0 0 0 -50px; }

  .product .left {float:none; width:100%; margin: 0 auto;}
  .product .left .fun, .product .left .fun-c, .product .left .fun-r {padding:0; flex-wrap: wrap;}
  .product .left .fun-c { padding:70px 0px 0 0px; }
  .product .left .fun > div:nth-child(1), .product .left .fun-r > div:nth-child(1) { padding:70px 10px 30px 10px; }
  .product .left .fun > div > h2, .product .left .fun-c > div > h2, .product .left .fun-r > div > h2 {font-size:2.15em; height:2.15em; line-height:2.15em;}
}

@media screen and (max-width:640px) {
  .left .list ul li a img {margin-top:30px;}
  .left .list ul li a h2 {position:absolute;}
  .left .list ul li p {margin-top:20px;}

  .article .info {display:none;}
  .article #quick-contact {height:auto;}
  .article .links {display:none;}
  .article .related li {width:100%; clear:both;}

  .product .left .fun > div > img, .product .left .fun-r > div > img { max-width:480px; }
  .product .left .fun-c > div > img { max-width:520px; }
  .product .left .fun-c > div > ul > li { width:175px; height:50px; margin:10px 10px;}
}

@media screen and (max-width:480px) {
  .product .left .fun-c > div > ul > li { width:150px; height:43px;}
}


/* Common Bottom */
.contact_bottom {clear:both; padding-top:30px; padding-bottom:30px; text-align:center;
    /*background-color: #f5f7ff;*/
    background-position: 0 -1400px;
    background-repeat: repeat-x;
    background-size: 2000px;
    background-image: url(/img/bg-home-02.png);
}
.contact_bottom h3 {font-size:34px; font-weight:600; height:3em; line-height:3em;}
.contact_bottom p {font-size:20px; font-weight:300; text-align:center; line-height:3em; margin-bottom:1em;}
.contact_bottom p b {font-size:21px; color:#f66; text-shadow:0 0 3px #fff;}
.contact_bottom button {background-color:#19a2c6; border:0; color:#fff; font-size:15px; line-height:3em; border-radius:5px; padding:0 2em; margin:2em 0;
    transition:all .4s; background:linear-gradient(219deg, #19a2c6 0%, #09c 100%) #09c; box-shadow:0 5px 10px 0 rgb(0 0 0 / 15%);}
.contact_bottom button:hover {background:linear-gradient(219deg, #09c 0%, #19a2c6 100%) #19a2c6; box-shadow:0 5px 10px 0 rgb(0 0 0 / 25%);}

@media screen and (max-width:360px) {
  .contact_bottom>p>span {display:none;}
}